<template>
  <div class="card">
    <img
      class="avatar"
      srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
      sizes="(max-width: 600px) 480px,
         800px"
      alt="avatar"
      :src="mm?.avatar"
    />
    <div class="name">
      <text>{{ mm?.name }}</text>
      <slot name="ext" />
      <text class="desc">{{ mm?.desc }}</text>
      <slot />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, toRefs } from 'vue'
import { CardItemType } from '../common/type'

export default defineComponent({
  props: {
    mm: CardItemType,
  },
  setup(props) {
    const { mm: mmm } = toRefs(props)
    if (mmm.value) {
      mmm.value.name = mmm.value.name.toUpperCase()
    }
    return {
      ...mmm.value,
    }
  },
})
</script>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
}
.card {
  width: 25%;
  margin: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px 15px;
  background-color: white;
  border-radius: 2px;
  border: 1px solid #fafafa;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 2px;
  margin: 5px 10px 5px 0;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
}
.name {
  display: flex;
  flex-direction: column;
  color: #333;
  font-size: 16px;
}
.desc {
  color: #666666;
  font-size: 12px;
  margin: 5px 0 0 0;
}
</style>
